<template>
  <navigator :url="item.linkUrl">
    <div class="card-item">
      <image class="card-img" mode="widthFix" :src="item.imageUrl" />
      <div :class="['card-name', item.name ? 'els-2' : 'els-1']">
        {{ item.title }}
      </div>
      <span class="light-text" v-if="item.name">{{ item.name }}</span>
      <div v-else>
        <div class="card-text">
          <span class="light-text">
            <uni-icons type="fire" size="20" color="red"></uni-icons>
          </span>
          <span>{{ item.lessonNum }} 已学习</span>
        </div>
        <div class="card-text">
          <span class="light-text">￥ {{ item.price }}</span>
          <span>{{ item.buyCount }} 人购买</span>
        </div>
      </div>
    </div>
  </navigator>
</template>

<script lang="ts" setup>
/*
  {
    imageUrl: xxx,
    title: xxx,
    name?: xxx,
    lessonNum?: xxx,
    buyNum?: xxx
    price?: xxx
  }
*/
import type { DataType } from "./types";

defineProps<{
  item: DataType;
}>();
</script>

<style scoped lang="scss">
.card-item {
  width: 345rpx;
  background-color: $uni-bg-color-grey;
  margin-bottom: 20rpx;
}

.card-img {
  width: 100%;
}

.card-name {
  font-weight: 700;
}

.card-text {
  font-size: 14px;
}

.light-text {
  color: red;
  margin-right: 20rpx;
  font-weight: 700;
  font-size: 14px;
}

.els-1 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.els-2 {
  overflow: hidden; // 溢出隐藏
  text-overflow: ellipsis; // 溢出用省略号显示
  display: -webkit-box; // 作为弹性伸缩盒子模型显示。
  -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
  -webkit-line-clamp: 2; // 显示的行数
}
</style>
